<template>
  <div>
    <a-row :gutter="[8, 8]">
      <a-col :span="8">
        <a-form-model-item label="心率" :labelCol="{ span: 5 }">
          <a-input-number v-model="physical.heartRate" :style="{ width: '90px' }" />
          <span :style="{ marginLeft: '0.5rem' }">次/分钟</span>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="脉搏" :labelCol="{ span: 5 }">
          <a-input-number v-model="physical.sphygmus" :style="{ width: '90px' }" />
          <span :style="{ marginLeft: '0.5rem' }">次/分钟</span>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="呼吸" :labelCol="{ span: 5 }">
          <a-input-number v-model="physical.breath" :style="{ width: '90px' }" />
          <span :style="{ marginLeft: '0.5rem' }">次/分钟</span>
        </a-form-model-item>
      </a-col>
    </a-row>

    <a-row :gutter="[8, 8]">
      <a-col :span="8">
        <a-form-model-item label="体重" :labelCol="{ span: 5 }">
          <a-input-number v-model="physical.weight" :style="{ width: '90px' }" />
          <span :style="{ marginLeft: '0.5rem' }">kg</span>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="身高" :labelCol="{ span: 5 }">
          <a-input-number v-model="physical.height" :style="{ width: '90px' }" />
          <span :style="{ marginLeft: '0.5rem' }">cm</span>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="BMI" :labelCol="{ span: 5 }">
          <span>{{
            physical.bmi || (physical.weight && physical.height)
              ? (physical.weight / ((physical.height / 100) * (physical.height / 100))).toFixed(2)
              : ''
          }}</span>
          <span :style="{ marginLeft: '0.5rem' }"></span>
        </a-form-model-item>
      </a-col>
    </a-row>

    <a-row :gutter="[8, 8]">
      <a-col :span="8">
        <a-form-model-item label="腰围" :labelCol="{ span: 5 }">
          <a-input-number v-model="physical.waist" :style="{ width: '90px' }" />
          <span :style="{ marginLeft: '0.5rem' }">cm</span>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="臀围" :labelCol="{ span: 5 }">
          <a-input-number v-model="physical.hip" :style="{ width: '90px' }" />
          <span :style="{ marginLeft: '0.5rem' }">cm</span>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="腰臀比" :labelCol="{ span: 5 }">
          <span>{{
            physical.whratio || (physical.waist && physical.hip) ? (physical.waist / physical.hip).toFixed(2) : ''
          }}</span>
          <span :style="{ marginLeft: '0.5rem' }"></span>
        </a-form-model-item>
      </a-col>
    </a-row>

    <a-row :gutter="[8, 8]">
      <a-col :span="8">
        <a-form-model-item label="血压收缩压" :labelCol="{ span: 5 }">
          <a-input-number v-model="physical.bloodSystolicPress" :style="{ width: '90px' }" />
          <span :style="{ marginLeft: '0.5rem' }">mmHg</span>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="血压舒张压" :labelCol="{ span: 5 }">
          <a-input-number v-model="physical.bloodDiastolicPress" :style="{ width: '90px' }" />
          <span :style="{ marginLeft: '0.5rem' }">mmHg</span>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <!-- 用于占位 -->
      </a-col>
    </a-row>

    <a-row :gutter="[8, 8]">
      <a-col :span="8">
        <a-form-model-item label="体温" :labelCol="{ span: 5 }">
          <a-input-number v-model="physical.temperature" :style="{ width: '90px' }" />
          <span :style="{ marginLeft: '0.5rem' }">℃</span>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="视力(左)" :labelCol="{ span: 5 }">
          <a-input-number v-model="physical.vision" :style="{ width: '90px' }" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="视力(右)" :labelCol="{ span: 5 }">
          <a-input-number v-model="physical.visionRight" :style="{ width: '90px' }" />
        </a-form-model-item>
      </a-col>
    </a-row>

    <!-- <a-divider orientation="left" :style="{ marginTop: '40px' }">上传体格检查报告单</a-divider>
    <a-form-model-item label="报告名称">
      <a-input v-model="physical.basicReportName" :max-length="20" :style="{ width: '300px' }" />
    </a-form-model-item> -->

    <!-- <a-form-model-item label="报告结论">
      <a-textarea
        :maxLength="500"
        v-model="physical.basicReportContent"
        placeholder=""
        :auto-size="{ minRows: 7, maxRows: 10 }"
        :style="{ width: '300px' }"
      />
      <div
        v-if="physical.basicReportContent != null && physical.basicReportContent.length > 0"
        :style="{ display: 'inline-block', marginLeft: '1rem' }"
      >
        {{ physical.basicReportContent.length }}/500
      </div>
    </a-form-model-item>

    <a-form-model-item v-bind="tailFormItemLayout">
      <j-image-upload
        text="上传"
        v-model="physical.basicReportPhoto"
        :is-multiple="true"
        :style="{ marginTop: '1.5rem' }"
        :preview="true"
        :img-arr="
          Array.isArray(physical.basicReportPhoto)
            ? physical.basicReportPhoto
            : physical.basicReportPhoto
            ? physical.basicReportPhoto.split(',')
            : []
        "
      ></j-image-upload>
    </a-form-model-item> -->
  </div>
</template>

<script>
export default {
  name: 'BasicChecking',
  props: ['physical'],
  data() {
    return {
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 12,
            offset: 2
          }
        }
      }
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.ant-form-item {
  margin: 0.5rem;
}
</style>

